<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./css/swiper-bundle.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/popper.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <title>Document</title>
  <style>
    
  </style>
</head>

<body>
  <header>
    <!-- 导航栏 -->
    <div class="daohang">
      <div class="container">      
        <div class="navbar  navbar-light navbar-expand-lg">
          <a href="#" class="">
        <img src="./img/logo.png" alt="">
          </a>          
        <!-- 小菜单 -->
         <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
           <span class="navbar-toggler-icon"></span>
         </button >
        <!-- 大菜单 -->
        <div id="menu" class="collapse navbar-collapse">
          <!-- 导航 -->
          <div class="sou bg-white ml-lg-5">
            <ul class="list-unstyled nav-list float-left d-flex">
              <li><a href="./index.html" >网站首页</a></li>
              <li><a href="./about.html" >关于我们</a></li>
              <li><a href="./team.html" >医疗团队</a></li>
              <li><a href="#" >服务项目</a></li>
              <li><a href="#" >医疗项目</a></li>
              <li><a href="#" >医疗案例</a></li>
              <li><a href="#" >分院地址</a></li>
              <li><a href="#" >医护常识</a></li>
              <li><a href="#" class="text-dark">联系我们</a></li>
            </ul>
          </div>
        </div>
      </div> 

    </div>
    </div>
  </header>
  <!-- 轮播部分 -->
  <div class="lunbo">
      <!-- 最外层轮播 -->
      <div class="carousel slide" id="banner" data-ride="carousel">
        <!-- 图片展示区 -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="./img/lun1.jpg" alt="" class="d-block w-100">
          </div>
          <div class="carousel-item">
            <img src="./img/lun2.jpg" alt="" class="d-block w-100">
          </div>
        </div>
        <!-- 左右的切换按钮 -->
        <a href="#banner" class="carousel-control-prev " data-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </a>
        <a href="#banner" class="carousel-control-next" data-slide="next">
          <span class="carousel-control-next-icon"></span>
        </a>
        <!-- 指示控制符 -->
        <ul class="carousel-indicators">
          <li class="" data-slide-to="0" data-target="#banner"></li>
          <li class="" data-slide-to="1" data-target="#banner"></li>
        </ul>
      </div>
    
    
  </div>
  <!-- 轮播部分end -->
  <!-- 主体部分 -->
  <div class="center">
    <div class="center-top">
      <div class="container">        
        <ul class="list-unstyled pt-5 pb-5 pl-5">
          <div class="row">
          <li class="col-lg-3 col-6">
            <h5>14年</h5>
            <span>技术沉淀</span>
          </li>
          <li class="col-lg-3 col-6">
            <h5>100名</h5>
            <span>职业兽医团队</span>
          </li>
          <li class="col-lg-3 col-6">
            <h5>10类</h5>
            <span>专科</span>
          </li>
          <li class="col-lg-3 col-6">
            <h5>100万人次</h5>
            <span>累计服务</span>
          </li>
        </div>
        </ul>
      
      </div>
    </div>
    <!-- 医疗服务 -->
    <div class="fuwu">
      <div class="container">
      <h1 class="col-12 text-center font-weight-light pt-5 pb-3">医疗服务</h1>      
      <ul class="list-unstyled pt-3 pb-3 pl-3 text-center ">
        <div class="row">
          <li class="col-sm-2">
            <a href="#">
              <img src="./img/yiliao.png" alt="">
              <p>医疗服务</p>
            </a>
          </li>
          <li class="col-sm-2">
            <a href="#">
              <img src="./img/aixinjuanzeng.png" alt="" class="">
              <p>体检服务</p>
            </a>
          </li>
          <li class="col-sm-2">
            <a href="#">
              <img src="./img/building.png" alt="">
              <p>住院服务</p>
            </a>
          </li>
          <li class="col-sm-2">
            <a href="#">
              <img src="./img/dianchifang.png" alt="">
              <p>美容服务</p>
            </a>
          </li>
          <li class="col-sm-2">
            <a href="#">
              <img src="./img/songshu.png" alt="">
              <p>宠物用品</p>
            </a>
          </li>

        </div>
      </ul>
      </div>
    </div>
    <!-- 医疗服务end -->
    <!-- 宠物医院 -->
    <div class="nav1">
      <div class="container">
        <div class="row pt-5">          
            <img src=".//img/nav1.jpg" alt="" class="col-lg-6 col-md-6 h-75">
          
           <div class="col-lg-6 col-md-6 px-lg-5 align-self-center">
            <h5>宠物健康，就选宠物医院</h5>
            <h1>宠物医院</h1>
            <p>宠物医院成立于2008年。是集宠物健康体检、疾病预防、诊疗、康复、临床教学等功能为一体的综合性动物连锁医疗机构。</p>
            <span>创院十四年来我院始终秉持“以人为本，以技术为核心，以宠物为中心”的核心经营理念。</span>
          </div>
        </div>
        <div class="row">
          <a href="#" class="col-12 text-center font-weight-light pt-3 pb-3 pl-5 pb-5">
            <img src="./img/tiao.png" alt="">
          </a>
        </div>
      </div>
    </div>
    <!-- 连锁机构 -->
    <div class="ls">
      <div class="container">
      <div class="row">
        <div class="tit col-12 text-center pt-5">
          <h1 class="font-weight-light">连锁机构</h1>
          <p>chain organization</p>
        </div>
      </div> 
      <div class="nav2">
       <div class="row">
          <a href="#" class="col-md-3 col-sm-6">
            <img src="./img/l1.jpg" alt="" class="w-100 mb-4">
            <p class="pb-3">武汉下辖江岸分院</p>
            <span>地址：武汉下辖江岸
              联系电话：0000-0000-0000
            </span>
          </a>
          <a href="#" class="col-md-3 col-sm-6">
            <img src="./img/l2.jpg" alt="" class="w-100 mb-4">
            <p class="pb-3">武汉下辖江岸分院</p>
            <span>地址：武汉下辖江岸
              联系电话：0000-0000-0000
            </span>
          </a>
          <a href="#" class="col-md-3 col-sm-6">
            <img src="./img/l3.jpg" alt="" class="w-100 mb-4">
            <p class="pb-3">武汉下辖江岸分院</p>
            <span>地址：武汉下辖江岸
              联系电话：0000-0000-0000
            </span>
          </a>
          <a href="#" class="col-md-3 col-sm-6">
            <img src="./img/l4.jpg" alt="" class="w-100 mb-4">
            <p class="pb-3">武汉下辖江岸分院</p>
            <span>地址：武汉下辖江岸
              联系电话：0000-0000-0000
            </span>
          </a>
       </div>
      </div>    

      </div>
    </div>
    <!-- 固定图 -->
    <div class="bgimg">
      <img src="./img/1612429078.jpg" alt="" class="w-100">
    </div>
   <!-- 专家团队 -->
   <div class="zj">
    <div class="container">
     <div class="tit">      
        <div class="row">
          <div class="left col-6">
            <h2>专家团队</h2>
            <p>epert team</p>
          </div>
          <div class="right col-6"></div>
        </div>
     </div>     
     <div class="body">       
         <ul class="list-unstyled">
          <div class="row">
           <li class="col-md-4"><a href="#">
             <img src="./img/ren1.jpg" alt="" >
             <h3>院长</h3>
             <p>擅长：熟练各种软组织手术、骨外科、脊椎神经外科等。执业兽医师，从业近20年。热爱宠物医疗行业的郑志农，一直不断努力探索，从未停下学习的脚步，曾参加国内外著名专家</p>
           </a></li>
           <li class="col-md-4"><a href="#">
            <img src="./img/ren2.jpg" alt="" >
            <h3>副院长</h3>
            <p>显微镜下神经外科(切口小、损伤小、出血少、康复快等特点)，做出了巨大的成就。显微镜下神经外科(切口小、损伤小、出血少、康复快等特点)，做出了巨大的成就。显微镜下</p>
          </a></li>
           <li class="col-md-4"><a href="#">
            <img src="./img/ren3.jpg" alt="" >
            <h3>副院长</h3>
            <p>在中国的小动物神经外科发展，开辟了新的领域。在中国的小动物神经外科发展，开辟了新的领域。在中国的小动物神经外科发展，开辟了新的领域。在中国的小动物神经外科发展，</p>
          </a></li>
          </div>
         </ul>       
     </div>
    </div>
   </div>
   <!-- 客户评价 -->
   <div class="pj">
     <div class="tit clearfix">
       <h3>客户评价</h3>
       <p>customer evaluation</p>
     </div>
     <div #swiperRef="" class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="./img/p1.jpg" alt="">
          <p>真的可以说是这家店的忠实粉丝了，狗狗在这儿买，非常健康，现在三岁了，这三年一直在这里做的美容服务，驱虫和疫苗也都是在这里做的。 有一次吃坏了，半夜急诊，医生也非常有耐心。</p>
        </div>
        <div class="swiper-slide">
          <img src="./img/p2.jpg" alt="">
          <p>小猫3个多月了，接回来开始就生病不断，不吃东西，又细菌性肠胃炎，现在又得了猫藓，真是从小体弱多病。 宠医离家近，每次都带来这儿。</p>
        </div>
        <div class="swiper-slide">
          <img src="./img/p3.jpg" alt="">
          <p>家里萨摩耶拉了两天肚子，来这家诊所看看（因为之前霸王餐来体检过，很满意） 时隔一个多月，接待的小姐姐居然认得我家狗狗[机智]由于是晚上，医生在给一只喵喵手术，暂时无法给狗狗做检查，只能大致询问了下狗狗拉肚子的情况，然后配了药（价格和网上自己</p>
        </div>
        <div class="swiper-slide">
          <img src="./img/p4.jpg" alt="">
          <p>本来打算打疫苗的，医生体检的时候，发现小猫，有一些感冒就处理感冒了。 大猫打了疫苗，检查耳朵，有些真菌感染也开了药。 这里的价格呢，打疫苗的话很便宜。其他药会比他自己淘宝贵一倍，但是医生都很专业 值得一提的是，这里的医生跟护士还有前台小姐姐</p>
        </div>
        <div class="swiper-slide">
          <img src="./img/p4.jpg" alt="">
          <p>家里萨摩耶拉了两天肚子，来这家诊所看看（因为之前霸王餐来体检过，很满意） 时隔一个多月，接待的小姐姐居然认得我家狗狗[机智]由于是晚上，医生在给一只喵喵手术，暂时无法给狗狗做检查，只能大致询问了下狗狗拉肚子的情况，然后配了药（价格和网上自己</p>
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
     </div>
   </div>
   <!-- 客户评价end -->
   <!-- 医护常识 -->
   <div class="cs">
    <div class="container">
      <div class="row">
        <div class="tit col-12 text-center pt-5">
          <h3>医护常识</h3>
          <p>mdical knowledge</p>
        </div>
        <div class="body pb-4">
          <ul class="list-unstyled img-fluid text-center ">
           <div class="row">
            <li class="col-md-3 col-sm-6 pb-3">
              <a href="#" class="col-md-3 col-sm-6">
                <img src="./img/c1.jpg" alt="" class="w-100 mb-4">
                <p>发布时间 ：2021-11-26</p>
                <span>如何更好的给犬驱虫与疫苗
                </span>
              </a>
            </li>
            <li class="col-md-3 col-sm-6 pb-3">
              <a href="#" class="col-md-3 col-sm-6">
                <img src="./img/c2.jpg" alt="" class="w-100 mb-4">
                <p>发布时间 ：2021-11-26</p>
                <span>猫咪舌头上倒刺的神秘作用
                </span>
              </a>
            </li>
            <li class="col-md-3 col-sm-6 pb-3">
              <a href="#" class="col-md-3 col-sm-6">
                <img src="./img/c3.jpg" alt="" class="w-100 mb-4">                
                <p>发布时间 ：2021-11-26</p>
                <span>宠物术前检查的重要性普及
                </span>
              </a>
            </li>
            <li class="col-md-3 col-sm-6 pb-3">
              <a href="#" class="col-md-3 col-sm-6">
                <img src="./img/c4.jpg" alt="" class="w-100 mb-4">                
                <p>发布时间 ：2021-11-26</p>
                <span>猫咪狗狗感冒有什么状态？
                </span>
              </a>
            </li>
           </div>
          </ul>
        </div>
      </div>
    </div>
   </div> 
  </div>
  <!-- 主体end -->
  <!-- 页尾 -->
  <footer>
    <div class="container">
      <div class="top row d-block text-center pt-3">
        <b>友情链接：</b>
        <a href="#">/动物医院</a>
        <a href="#">/宠物百科</a>
      </div>
      <div class="row pt-5">
        <div class="col-12 col-md-4 ">
          <h5>关于我们</h5>
          <img src="./img/ma.png" alt="" class="">
          <p>扫一扫！关注我们最新消息</p>
        </div>
        <div class="col-12 col-md-4">
          <h5>联系我们</h5>
          <p class="ts">0731-000-000</p>
          <p>周一至周日9:00-18:00</p>
          <p>邮箱：email@email.mt</p>
          <p>地址：四川省成都市总部经济区</p>
        </div>
        <div class="col-12 col-md-4 ">
          <h5>网站导航</h5>
          <div class="foot-list justify-content-between d-flex w-50">
            <ul class="list-unstyled">
              <li><a href="./about.html">关于我们</a></li>
              <li><a href="#">服务项目</a></li>
              <li><a href="#">医疗案例</a></li>
              <li><a href="#">医护常识</a></li>
              <li><a href="#">特色功能</a></li>
            </ul>
            <ul class="list-unstyled">
              <li><a href="./team.html">医疗团队</a></li>
              <li><a href="#">医疗设备</a></li>
              <li><a href="#">分院地址</a></li>
              <li><a href="#">联系我们</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <div class="biaoqian">
    <b>&copy;作品制作人：曹莉君</b>
  </div>

  <!--  -->
<script src="./js/swiper-bundle.min.js"></script>
<script>
  var swiper = new Swiper(".mySwiper", {
    slidesPerView: 3,
    centeredSlides: true,
    spaceBetween: 30,
    pagination: {
      el: ".swiper-pagination",
      type: "fraction",
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });

  var appendNumber = 4;
  var prependNumber = 1;
  document
    .querySelector(".prepend-2-slides")
    .addEventListener("click", function (e) {
      e.preventDefault();
      swiper.prependSlide([
        '<div class="swiper-slide">Slide ' + --prependNumber + "</div>",
        '<div class="swiper-slide">Slide ' + --prependNumber + "</div>",
      ]);
    });
  document
    .querySelector(".prepend-slide")
    .addEventListener("click", function (e) {
      e.preventDefault();
      swiper.prependSlide(
        '<div class="swiper-slide">Slide ' + --prependNumber + "</div>"
      );
    });
  document
    .querySelector(".append-slide")
    .addEventListener("click", function (e) {
      e.preventDefault();
      swiper.appendSlide(
        '<div class="swiper-slide">Slide ' + ++appendNumber + "</div>"
      );
    });
  document
    .querySelector(".append-2-slides")
    .addEventListener("click", function (e) {
      e.preventDefault();
      swiper.appendSlide([
        '<div class="swiper-slide">Slide ' + ++appendNumber + "</div>",
        '<div class="swiper-slide">Slide ' + ++appendNumber + "</div>",
      ]);
    });
</script>

</body>

</html>